import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Table, Avatar } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { getDistributorList, deleteDistributor } from '@/services/supplier/distributor/list'

import { router } from 'umi'

// 表头
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id',
    align: 'center'
  },
  {
    title: 'LOGO',
    dataIndex: 'distributorLogo',
    key: 'distributorLogo',
    align: 'center',
    render: distributorLogo => <Avatar shape="square" size="large" src={distributorLogo} />
  },
  {
    title: '渠道商名称',
    dataIndex: 'companyName',
    key: 'companyName',
    align: 'center'
  },
  {
    title: '联系人',
    dataIndex: 'contactName',
    key: 'contactName',
    align: 'center'
  },
  {
    title: '联系人电话',
    dataIndex: 'contactPhone',
    key: 'contactPhone',
    align: 'center'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center'
  }
]

const List = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [distributorList, setDistributorList] = useState([])
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [status, setStatus] = useState('1')

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])

  const init = async () => {
    let params = {
      pageNo,
      pageSize,
      status
    }
    await getDistributorLists(params)
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        pageNo,
        pageSize,
        status,
        distributorName: values.distributorName
      }
      await getDistributorLists(params)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Col span={8}>
        <Form.Item label={`渠道商名称`}>
          {getFieldDecorator(`distributorName`, {})
            (<Input placeholder="请输入渠道商名称" />)}
        </Form.Item>
      </Col>
    )
  }
  // 按钮处理
  const handleBtn = type => {
    console.log(type)
    switch (type) {
      // 新增渠道商
      case 1:
        router.push('/supplier/distributor/add')
        break
      // 编辑渠道商
      case 3:
        if (!record[0]) return
        router.push({
          pathname: '/supplier/distributor/add',
          query: {
            id: record[0].id
          }
        })
        break
      // 删除渠道商
      case 4:
        if (!record[0]) return
        let params = {
          id: record[0].id
        }
        deleteDistributors(params)
        break
    }
  }
  getDistributorLists
  // 获取渠道商列表
  const getDistributorLists = async (params) => {
    let res = await getDistributorList(params)
    if (res.code === '0') {
      setDistributorList(res.data)
      setTotal(res.iTotalDisplayRecords)
    } else {
      alert(res.msg)
    }
  }

  const pagination = {
    total: parseInt(total),
    onChange(page) {
      let params = {
        pageNo: page,
        pageSize,
        status
      }
      getDistributorLists(params)
    }
  }
  // 删除渠道商
  const deleteDistributors = async (params) => {
    let res = await deleteDistributor(params)
    if (res.code === '0') {
      alert(res.msg)
    } else {
      alert(res.msg)
    }
  }

  return (
    <PageHeaderWrapper>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Table
        columns={columns}
        dataSource={distributorList}
        rowKey={record => record.id}
        pagination={pagination}
        rowSelection={rowSelection}
      />
   </PageHeaderWrapper>
  )
}

export default Form.create()(List)
